<template>
  <MenuSider />
  <EditorPanel v-if="editorState.isNotDefaultView" class="h5-editor__components">
    <Scrollbar :key="`${editorState.menu.selectedKey}_key`" class="flex flex-col flex-1 p-6 overflow-hidden">
      <div class="h5-editor-component__group">
        <div class="flex flex-col gap-y-6">
          <h2 class="group-title">
            组件库
            <a-tooltip overlayClassName="editor-tooltip" placement="right">
              <template #title>
                <small>组件库的组件仅能设置样式，不能拖动到画布。</small>
              </template>
              <img class="w-4 h-4" :src="headerIcons.help" />
            </a-tooltip>
          </h2>
          <div id="components-title" class="grid grid-cols-3 gap-y-4">
            <div
              class="h5-editor-component__button"
              :class="{ checked: currentCheckedComponent == item.key, disabled: item.disabled }"
              v-for="item in panelConfig('comp').components"
              :key="item.key"
              @click="() => componentPanelChecked(item)"
              :data-key="item.key"
              :data-icon="item.icon"
            >
              <div class="component-button__content">
                <img class="block w-8 h-8 align-middle" :src="icons[item.icon]" />
              </div>
              <span class="text" :class="currentCheckedComponent == item.key ? 'text-[#0171EF]' : ''">
                {{ iconsNames[item.icon] }}
              </span>
            </div>
          </div>
          <h2 class="group-title">
            广告组件
            <a-tooltip overlayClassName="editor-tooltip" placement="right">
              <template #title>
                <small>拖动广告库组件到画布，可以添加广告位</small>
              </template>
              <img class="w-4 h-4" :src="headerIcons.help" />
            </a-tooltip>
          </h2>
          <div id="advs-title" class="grid grid-cols-3 gap-y-4">
            <template v-for="item in panelConfig('adv').components" :key="item.key">
              <a-tooltip :visible="item.disabled ? undefined : false" overlayClassName="editor-tooltip" placement="top">
                <template #title>
                  <small>当前页面不支持添加此类型广告</small>
                </template>
                <div
                  class="h5-editor-component__button"
                  :key="item.key"
                  :class="{ checked: currentCheckedComponent == item.key, disabled: item.disabled }"
                  :data-key="item.key"
                  :data-icon="item.icon"
                  :data-disabled="item.disabled"
                  @click="() => componentPanelChecked(item)"
                >
                  <div class="component-button__content">
                    <img class="block w-8 h-8 align-middle" :src="icons[item.icon]" />
                  </div>
                  <span class="text" :class="currentCheckedComponent == item.key ? 'text-[#0171EF]' : ''">
                    {{ iconsNames[item.icon] }}
                  </span>
                </div>
              </a-tooltip>
            </template>
          </div>
          <h2 class="group-title">全局组件</h2>
          <div class="grid grid-cols-3 gap-y-4">
            <div
              class="h5-editor-component__button"
              v-for="item in editorState.globalComponents.components"
              :class="{ checked: currentCheckedComponent == item.key, disabled: item.disabled }"
              :key="item.key"
              :data-key="item.key"
              :data-icon="item.icon"
              @click="() => componentPanelChecked(item)"
            >
              <div class="component-button__content">
                <img class="block w-8 h-8 align-middle" :src="icons[item.icon]" />
              </div>
              <span class="text" :class="currentCheckedComponent == item.key ? 'text-[#0171EF]' : ''">
                {{ iconsNames[item.icon] }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </Scrollbar>
  </EditorPanel>
  <a-layout-content>
    <Scrollbar
      :key="`${editorState.menu.selectedKey}_key`"
      class="flex flex-col flex-1 overflow-hidden"
      :view-class="
        editorState.isNotDefaultView
          ? 'flex flex-col items-center justify-center p-16'
          : 'grid grid-col-1 gap-2 items-center justify-center p-16'
      "
    >
      <div :style="{ zoom: editorState.zoom }">
        <CanvasView v-if="editorState.isNotDefaultView" :type="editorState.menu.selectedKey" />
        <DefaultViews v-else />
      </div>
    </Scrollbar>
  </a-layout-content>
  <a-layout-sider
    :width="editorState.isNotDefaultView ? 280 : 0"
    v-if="editorState.isNotDefaultView"
    class="h5-editor__sider"
  >
    <div class="flex items-center px-4 text-white h-14 gap-x-1">
      <mobile-outlined />
      <span>移动端</span>
      <span>750 * 1334 px</span>
    </div>
    <a-divider class="m-0" :style="{ borderColor: 'rgba(125, 129, 137, 0.38) !important' }" />
    <div class="flex-1 overflow-hidden">
      <a-tabs
        :key="`${editorState.componentPanel.checked}_${editorState.menu.selectedKey}_key`"
        class="h5-editor__tabs"
        centered
        v-model:activeKey="editorState.siderPanel.active"
      >
        <a-tab-pane key="component" :tab="currentCheckedComponent === 'globalSetting' ? '数据来源' : '组件设置'">
          <Scrollbar class="overflow-hidden" wrap-class="pb-12">
            <JsonSchemaForm
              :model="editorState.configState"
              layout="vertical"
              :debug="editorState.debug"
              labelAlign="left"
              :colon="false"
              :schemas="(editorState.schemas.component as unknown as JsonSchemas)"
            />
          </Scrollbar>
        </a-tab-pane>
        <a-tab-pane key="global" :tab="currentCheckedComponent === 'globalSetting' ? '公共组件' : '全局设置'">
          <Scrollbar class="overflow-hidden" wrap-class="pb-12">
            <JsonSchemaForm
              :debug="editorState.debug"
              :model="editorState.configState"
              layout="vertical"
              labelAlign="left"
              :colon="false"
              :schemas="(editorState.schemas.global  as unknown as JsonSchemas)"
            />
          </Scrollbar>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-layout-sider>
</template>

<script setup lang="ts">
import MenuSider from './MenuSider.vue'
import EditorPanel from '../components/EditorPanel.vue'
import Scrollbar from '@cms/scrollbar'
import headerIcons from '../assets/header'
import icons, { iconsNames } from '../assets/components'
import JsonSchemaForm, { type JsonSchemas } from '@/components/cms/json-schema-form'
import {
  editorState,
  componentPanelChecked,
  currentCheckedComponent,
  panelConfig,
  initialGuide
} from '../mixins/useEditorState'
import CanvasView from './CanvasView.vue'
import DefaultViews from './DefaultViews.vue'
import { onMounted } from 'vue'
onMounted(() => {
  initialGuide()
})
</script>

<style scoped></style>
